<template>
  <div class="face">
    <div class="header">
      <BackHeader :title="chu"></BackHeader>
    </div>
    <div class="section">
      <van-contact-card
        type="edit"
        name="张三"
        tel="13000000000"
        :editable="false"
      />
      <div class="box">
        <div :class=" Mon == '' && Eve == '' ? 'yuan' : (show ? 'yuan' : 'huiyuan' ) ">
          <div :class=" Mon == '' && Eve == '' ? 'lian' : (show ? 'lian' : 'hui' ) " @click="show ? '' : lianFun() ">
          </div>
            <p>上班打卡</p>
            <p>{{ timers }}</p>
          
        </div>
      </div>
      <div class="text">
        已经进入考勤范围，{{ address }}<span @click="oridFun">重新定位</span>
      </div>
      <van-steps direction="vertical" :active="-1">
        <van-step>
          <h3>上班时间:8:30</h3>
          <p>待打卡</p>
        </van-step>
        <van-step>
          <h3>下班时间：11:30</h3>
          <p>待打卡</p>
        </van-step>
      </van-steps>

      <van-steps direction="vertical" :active="-1">
        <van-step>
          <h3>上班时间：1:30</h3>
          <p>待打卡</p>
        </van-step>
        <van-step>
          <h3>下班时间：17:30</h3>
          <p>待打卡</p>
        </van-step>
      </van-steps>
    </div>
    <div class="footer">
      <van-tabbar v-model="active" style="z-index: 111">
        <van-tabbar-item icon="home-o">考勤卡</van-tabbar-item>
        <van-tabbar-item icon="invition">考勤统计</van-tabbar-item>
      </van-tabbar>
    </div>
  </div>
</template>

<script>
import { onMounted,onBeforeMounted, watch } from 'vue'
import BMap from 'BMap'
import BackHeader from "../../components/backHeader";
import { ref } from "vue";
import { jsonp } from 'vue-jsonp'
import monent from 'moment'
import {punchList,punchDa} from '../../api/punch/punch'

export default {
  // name:'BMap',
  components: { BackHeader },
  data() {
    return {
      title: "",
      wei: "潍坊软件园",
      address:"",
      timers:"",
      lng:"",
      lat:"",
      Mon:"",
      Eve:"",
      obj:{},
      show:false
    };
  },
  watch:{
    show(newtim,oldtim){
      this.show = newtim
    }
  },
  setup() {
    let chu = ref("考勤打卡");
    return {
      chu,
    };
  },
  mounted(){
    
    this.oridFun();
    this.timer();
  },
  methods: {
    timee(){
      let aa = setInterval(() => {
        this.show = new Date(this.Mon) * 1 + 10000 < new Date() * 1;
        if (this.show) {
          clearInterval(aa)
        }
      },1000)
    },
    timer(){
      let date = new Date();
      this.timers = monent(date).format('hh:mm:ss')
    },
    list(){
      punchList().then(res => {
        if (res.status == 200) {
          this.obj = res.data[res.data.length - 1]
          this.Mon = res.data[res.data.length - 1].punchMon;
          this.timee();
          
        }
      },err => {
        console.log(err);
      })
    },
    lianFun(){
      
        this.oridFun();
        this.timer();
        this.list();
        this.disableds = true
        let timers = monent(new Date()).format('YYYY-MM-DD hh:mm:ss a');

        punchDa({
          punchMon:timers,
          punchEve:"",
          punchLng:this.lng,
          punchLat:this.lat,
          punchPlace:this.address,
          state:2
        }).then(res => {
          if (res.status == 200) {
            console.log(res.data);
          }
        },err => {
          console.log(err);
        })
      
      
    },
    onClickLeft() {
      this.$router.push("/");
    },
    oridFun() {
      var geolocation = new BMap.Geolocation();
      geolocation.getCurrentPosition(
         (r) => {
          if (geolocation.getStatus() == "0") {
            //console.log(r.point.lng + "__" + r.point.lat);
            this.getAddress(r.point.lng, r.point.lat);
          } else {
            alert("failed" + geolocation.getStatus());
          }
        },
        { enableHighAccuracy: true }
      );
      
    },
    getAddress(lng, lat) {
        var myGeo = new BMap.Geocoder();
        // 根据坐标得到地址描述    
        myGeo.getLocation(new BMap.Point(lng, lat),  (result) => {
            if (result) {
                var province = result.addressComponents.province;
                var city = result.addressComponents.city;
                var detail = `${result.addressComponents.district}${result.addressComponents.street}${result.addressComponents.streetNumber}`;
                //console.log(result.address);
                this.address = result.address;
                this.lng = lng;
                this.lat = lat;
                // console.log(detail);
                // console.log(province)
                // console.log(city)

                
            }
        });
      }
  },
};
</script>
<style lang='scss' scoped>
@import '../../style/minxi.scss';
.face {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}
.bm-view {
  width: 100px;
  height: 100px;
}
.header {
  width: 100%;
}
.box {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.4rem 0;
  box-sizing: border-box;
}
.huiyuan{
  width: 110px;
  height: 110px;
  background: #464849;
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: white;
  position: relative;
  p {
    font-size: 14px;
    font-weight: bold;
    height: 0;
    margin-top: 4px;
    z-index: 1;
  }
}
.yuan {
  width: 110px;
  height: 110px;
  background: #0e9cff;
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: white;
  position: relative;
  p {
    font-size: 14px;
    font-weight: bold;
    height: 0;
    margin-top: 4px;
    z-index: 1;
  }
}
.section {
  flex: 1;
  overflow-y: auto;
}
.section::-webkit-scrollbar {
  display: none;
}
.footer {
  width: 100%;
}
.text {
  width: 100%;
  height: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  span {
    color: orange;
  }
}

.lian{
  @include lian(#0E9CFF)
}

.hui{
  @include lian(#666869)
}
</style>